<template>
	<view class="page pageBg">
		<v-header title="企业信息" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="companyInfoContainer">
				<!--头部信息-->
				<view class="header f">
					<view class="headerLeft"><image src="../../static/img/logo1.png" mode="scaleToFill" class="logo"></image></view>
					<view class="headerRight">
						<view class="name">北京文化科技有限公司</view>
						<view class="tip">
							<text class="cuIcon-infofill"></text>
							如需了解更多详情，请访问(www.bbi.com.cn)
						</view>
					</view>
				</view>
				<!--tab-->
				<view class="companytab f fa">
					<view class="tabItem" v-for="(item, index) in navTab" :key="index" @click="tabTap(index)">
						<image :src="item.img" mode=""></image>
						<view>{{ item.name }}</view>
					</view>
				</view>
				<!--企业画像-->
				<view class="content" v-if="navIndex == 0">
					<view class="qiun-charts"><canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas></view>
				</view>
				<!--基础信息-->
				<view class="content" v-if="navIndex == 1">
					<view class="borderBot">
						<view class="title">基础信息</view>
						<view class="loginBox ">
							<view class="f cell">
								<label class="label">成立日期:</label>
								<view class="fl">2020-02-26</view>
							</view>
							<view class="f cell">
								<label class="label">营业收入:</label>
								<view class="fl">10.1111万元(2020年)</view>
							</view>
							<view class="f cell">
								<label class="label">员工人数:</label>
								<view class="fl">100</view>
							</view>
							<view class="f cell">
								<label class="label">是否获得投资:</label>
								<view class="fl">是</view>
							</view>
							<view class="f cell">
								<label class="label">拥有有效知识产权数:</label>
								<view class="fl">5</view>
							</view>
							<view class="f cell">
								<label class="label">联系人:</label>
								<view class="fl">张三</view>
							</view>
							<view class="f cell">
								<label class="label">联系人手机:</label>
								<view class="fl">13300000001</view>
							</view>
							<view class="f cell">
								<label class="label">联系人邮箱:</label>
								<view class="fl">1545522577@qq.com</view>
							</view>
						</view>
					</view>
					<view class="borderBot no-border">
						<view class="title">空间状态</view>
						<view class="space" v-for="(item, index) in list" :key="index">
							<view class="smallTit">世宁大厦</view>
							<view class="f margin20">
								<label>租用工位数：</label>
								<text>10(个)</text>
							</view>
							<view class="f margin20">
								<label>房间租用数：</label>
								<text>1(间)天</text>
							</view>
							<view class="f margin20">
								<label>租用房间面积：</label>
								<text>100(平方米)</text>
							</view>
							<view class="f margin20">
								<label>租用地址：</label>
								<text>1(个)</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/js/u-charts.js';
var _self;
var canvaRadar = null;
export default {
	data() {
		return {
			h: this.$h,
			navIndex: 0,
			navTab: [
				{
					state: 0,
					name: '企业画像',
					img:'../../static/img/danger_tab1.png'
				},
				{
					state: 1,
					name: '基础信息',
					img:'../../static/img/map_0.png'
				},
				{
					state: 2,
					name: '合同信息',
					img:'../../static/img/danger_tab5.png'
				}
			],
			//空间状态
			list: [{ id: 0 }, { id: 1 }],
			//企业画像
			cWidth: '',
			cHeight: '',
			pixelRatio: 1
		};
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(600);
		this.getServerData();
	},
	methods: {
		tabTap(index) {
			this.navIndex = index;
			if (this.navIndex == 2) {
				uni.navigateTo({
					url: './contractInfo'
				});
			}
		},
		//雷达
		getServerData() {
			var chartData = {
				categories: ['融资能力', '管理能力', '财务能力', '企业资质', '研发能力', '团队架构'],
				series: [
					{
						name: '融资能力',
						data: [0, 1.1, 1.2, 2.2, 3.3, 10]
					},
					{
						name: '管理能力',
						data: [0, 2.1, 2.2, 2.2, 3.3, 4.4]
					},
					{
						name: '财务能力',
						data: [0, 3.1, 3.2, 2.2, 3.3, 6.4]
					},
					{
						name: '企业资质',
						data: [0, 4.1, 4.2, 2.2, 3, 5.4]
					},
					{
						name: '研发能力',
						data: [1, 5.1, 5.2, 2.2, 3.3, 4.4]
					},
					{
						name: '团队架构',
						data: [0, 6.1, 6.2, 2.2, 3.3, 4]
					}
				]
			};
			_self.showRadar('canvasRadar', chartData);
			// uni.request({
			// 	url: 'https://www.ucharts.cn/data.json',
			// 	data:{
			// 	},
			// 	success: function(res) {
			// 		console.log(res.data.data)
			// 		let Radar={categories:[],series:[]};
			// 		Radar.categories=res.data.data.Radar.categories;
			// 		Radar.series=res.data.data.Radar.series;
			// 		_self.showRadar("canvasRadar",Radar);
			// 	},
			// 	fail: () => {
			// 		_self.tips="网络错误，小程序端请检查合法域名";
			// 	},
			// });
		},
		showRadar(canvasId, chartData) {
			canvaRadar = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'radar',
				fontSize: 12,
				legend: { show: true },
				background: '#FFFFFF',
				gridColor: '#f00',
				pixelRatio: _self.pixelRatio,
				animation: true,
				dataLabel: true,
				categories: chartData.categories,
				series: chartData.series,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					radar: {
						max: 10, //雷达数值的最大值
						labelColor: '#409EFF'
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.qiun-charts {
	width: 750upx;
	height: 600upx;
	background-color: #ffffff;
	margin-top: 100rpx;
}

.charts {
	width: 750upx;
	height:600upx;
	background-color: #ffffff;
}
.pageBg {
	//background-color: #f0f0f0;
}
.companyInfoContainer {
	width: 100%;
	height: 100%;
	.header {
		width: 100%;
		height: 200rpx;
		background: $color;
		padding: 10rpx 30rpx 30rpx;
		box-sizing: border-box;
		.headerLeft {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: #f0f0f0;
			margin-right: 30rpx;
			padding: 10rpx;
			box-sizing: border-box;
			.logo {
				width: 100%;
				height: 100%;
			}
		}
		.headerRight {
			color: #fff;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}
			.cuIcon-infofill {
				margin-right: 15rpx;
			}
		}
	}
	.companytab {
		width: 100%;
		padding: 20rpx 30rpx;
		margin: 0rpx auto;
		background: #fff;
		// border-radius: 10rpx;
		// box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.24);
		border-bottom: 20rpx solid #f0f0f0;
		.tabItem {
			text-align: center;
			font-weight: bold;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
	.content {
		width: 100%;
		height: calc(100% - 405rpx);
		overflow: auto;

		.no-border {
			border: none !important;
		}
		.borderBot {
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 20rpx solid #f0f0f0;
		}
		.title {
			border-left: 10rpx solid $color3;
			padding-left: 15rpx;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		.loginBox {
			.cell {
				height: 70rpx;
				margin: 0 0rpx 20rpx 0rpx;

				view {
					color: #888;
					font-size: 30rpx;
				}
				.label {
					width: 200rpx;
					margin-right: 20rpx;
					text-align: right;
					font-size: 30rpx;
				}
			}
		}
		.space {
			width: 100%;
			margin-bottom: 30rpx;
			border-radius: 15rpx;
			padding: 30rpx;
			box-sizing: border-box;
			box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.24);
			.smallTit {
				font-weight: bold;
				border-bottom: 1px solid #eee;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}
			label {
				font-size: 30rpx;
				color: #000000;
				margin-right: 20rpx;
			}
			.margin20 {
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
